{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button @click="onSubmit(true,'{:url(\'close\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">启用/禁用</el-button>
			<el-button type="primary" size="small" @click="addDialog=true">新增分组</el-button>
		</el-col>
		<el-col :span="14" style="text-align: right;">
			<el-form :model="params" inline label-width="0px" size="small">
				<el-form-item label="">
				    <el-input v-model="params.val" placeholder="搜索标题关键词" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="params.type" placeholder="请选择状态">
						<el-option
						  label="全部"
						  value="-1">
						</el-option>
						<el-option
						  label="启用"
						  value="1">
						</el-option>
						<el-option
						  label="禁用"
						  value="0">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" size="mini" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" align="center" width="70" sortable></el-table-column>
		<el-table-column prop="login_name" label="用户名"></el-table-column>
		<el-table-column prop="name" label="标题"></el-table-column>
		<el-table-column prop="remark" label="备注"></el-table-column>
		<el-table-column label="状态" sortable align="center">
			<template slot-scope="scope">
				<template v-if="scope.row.status">
					启用
				</template>
				<template v-else>
					禁用
				</template>
			</template>
		</el-table-column>
		<el-table-column label="属性">
			<template slot-scope="props">
		  		<el-tag
		  		  v-for="tag in props.row.options"
		  		  :key="tag.name"
		  		  v-if="tag.value>0"
		  		  size="mini"
		  		  class="m_x5"
		  		  type="success">
		  		  {{tag.title}}
		  		</el-tag>
		  	</template>
		</el-table-column>
		<el-table-column prop="s_time" :formatter="dateFormats" label="添加时间"></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

				<el-button type="danger" size="mini" class="ws-mini" @click="close(scope.row)" v-if="scope.row.status">禁用</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="close(scope.row)" v-else>启用</el-button>

				<el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="page">{$list->render()|raw}</div>

	<!-- 添加、编辑分组 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="分组名称" prop="name">
				<el-input v-model="data.name" placeholder="分组名称"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">禁用</el-radio>
				    <el-radio :label="1">启用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="用户">
				<el-select v-model="data.uid" placeholder="请选择用户">
				    <el-option
				      v-for="item of user"
				      :key="item.id"
				      :label="item.login_name" 
				      :value="item.id">
				      
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="data.remark" placeholder="分组说明"></el-input>
			</el-form-item>
			<el-form-item>
				<p>该分组素材属性：</p>
			</el-form-item>
			<template  v-for="v of options">
				<el-form-item :label="v.title">
					<el-radio-group v-model="v.value">
					    <el-radio label="0">关闭</el-radio>
					    <el-radio label="1">开启</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="媒体类型" v-if="v.type==='media'&&v.value==1">
					<el-radio-group v-model="v.media_type">
					    <el-radio label="image">图片</el-radio>
					    <el-radio label="video">视频</el-radio>
					    <el-radio label="audio">音频</el-radio>
					</el-radio-group>
				</el-form-item>
			</template>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addDialog = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}',submitData)">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑分组 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},
		imagesPrefix:"{:images('')}",
		defaultOptions:{$options|raw},
		options:{$options|raw},
		user:{$userl->toJson()|raw},	// 用户列表 
		uid:'',
		currentOptions:{},
		data:{}, // 添加、编辑数据
		addDialog:false, // 显示添加、编辑框
		dialogTitle:'添加分组', // 添加、编辑框标题
		rules:{
			name:{required:true,message:'分组名称不能为空'}
		},
	},
	created(){
		this.emptyData();
	},
	computed:{
		submitData(){
			return Object.assign(this.data,{
				options:this.merge(this.defaultOptions,this.options)
			});
		},

	},
	watch:{
		addDialog(val){
			if(!val){
				this.dialogTitle='添加分组';
				this.emptyData();
				this.options=this.clone(this.defaultOptions);
			}
		}
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				name:'',
				remark:'',
				status:1,
			},this.clone(newData));
		},
		// 素材组编辑
		edit(row){
			this.emptyData(row);
			this.cloneOptions(row.options)
			this.dialogTitle='分组编辑';
			this.addDialog=true;
		},
		// 检测 基本配置项是否发生改变（实现原配置的增改）
		cloneOptions(currentOptions){
			let options=this.options;
			if(currentOptions){
				options.forEach(item=>{
					currentOptions.forEach(val=>{
						if(item.name===val.name){
							item.value=val.value;
							item.default=val.default;
						}
					})
				});
			}
		},
		// 素材组启用、禁用
		close(row){
			this._wspost("{:url('close')}",{id:row.id},res=>{
				if(res.code){
					row.status=Math.abs(row.status-1);
				}
			},false);
		},
		// 搜索查询
		search(){
			let params=this.params,queryStr='';
			for(let key in params){
				if(queryStr.length>0){
					queryStr+='&';
				}else{
					queryStr+='?';
				}
				queryStr+=key+'='+params[key];
			}
			location.href="{:url('')}"+queryStr;
		},
	},
});
</script>
{/block}